<template>
  <div class="div_white">
    <el-card>
      <!-- 增加新闻 -->
      <el-button type="success" @click="add" icon="el-icon-circle-plus-outline" class="addnew_btn">
        增加新闻</el-button>
      <el-dialog title="增加新闻" :visible.sync="addDialogVisible" width="28vw">
        <el-form label-width="auto">
          <!-- <el-form-item label="点击量:" width="22vw">
            <el-input v-model="addnew.newsClickcount" placeholder="请输入点击量" width="20vw"></el-input>
          </el-form-item> -->
          <el-form-item label="新闻标题:" width="22vw">
            <el-input type="textarea" placeholder="请输入新闻标题" v-model="addnew.newsHead">
            </el-input>
          </el-form-item>
          <el-form-item label="新闻内容:" width="22vw">
            <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入新闻内容"
              v-model="addnew.newsBody">
            </el-input>
          </el-form-item>
          <el-form-item label="新闻类型:">
            <el-select style="float: left" v-model="addnew.newsType">
              <el-option value="0" label="学生"></el-option>
              <el-option value="1" label="讲师"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间:">
            <el-input v-model="addnew.newsDate" placeholder="请输入注册时间" type="date"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload class="upload-demo" action="http://172.16.13.212:8090/uploadoss" :on-remove="handleRemove"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <el-button size="small" type="primary" class="push">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
            <el-image :src="addnew.newsImg" alt=""></el-image>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addNew">确定</el-button>
        </span>
      </el-dialog>
      <!-- 表格渲染 -->
      <el-table :data="tableData">
        <el-table-column label="序号" type="index" width="60"> </el-table-column>
        <el-table-column prop="newsHead" label="标题" width="320">
        </el-table-column>
        <el-table-column prop="newsBody" width="480" label="新闻">
        </el-table-column>
        <el-table-column prop="newsClickcount" label="点击量" width="80">
        </el-table-column>
        <el-table-column prop="newsDate" width="160" label="时间">
          <template slot-scope="scope">
            <span>
              {{ (scope.row.newsDate).slice(0, 10) }}
              {{ (scope.row.newsDate).slice(11, 16) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="newsType" label="类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.newsType == 2">漏洞情报</span>
            <span v-if="scope.row.newsType == 1">安全漏洞</span>
            <span v-if="scope.row.newsType == 3">政策法规</span>
            <span v-if="scope.row.newsType == 4">技术文章</span>
          </template>
        </el-table-column>
        <el-table-column prop="newsImg" width="100" label="图片">
          <template slot-scope="scope">
            <el-avatar :size="100" shape="square" :src="scope.row.newsImg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateNew(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deletenew(scope.row.newsId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑模态框 -->
      <el-dialog title="增加新闻" :visible.sync="updateDialogVisible" width="28vw">
        <el-form label-width="auto">
          <!-- <el-form-item label="点击量:" width="22vw">
          <el-input
            v-model="updatenew.newsClickcount"
            placeholder="请输入点击量"
            width="20vw"
          ></el-input>
        </el-form-item> -->
          <el-form-item label="新闻标题:" width="22vw">
            <el-input type="textarea" placeholder="请输入新闻标题" v-model="updatenew.newsHead">
            </el-input>
          </el-form-item>
          <el-form-item label="新闻内容:" width="22vw">
            <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入新闻内容"
              v-model="updatenew.newsBody">
            </el-input>
          </el-form-item>
          <el-form-item label="新闻类型:">
            <el-select style="float: left" v-model="updatenew.newsType">
              <el-option value="1" label="安全咨询"></el-option>
              <el-option value="2" label="漏洞情报"></el-option>
              <el-option value="3" label="政策法规"></el-option>
              <el-option value="4" label="技术文章"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间:">
            <el-input v-model="updatenew.newsDate" placeholder="请输入注册时间" type="date"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload class="upload-demo" action="http://172.16.13.212:8090/uploadoss" :on-remove="handleRemove"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <el-button size="small" type="primary" class="push">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
            <el-image :src="updatenew.newsImg" alt=""></el-image>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateinfo">确定</el-button>
        </span>
      </el-dialog>
      <!-- 分页区域 -->
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :page-size="query.pageSize" :current-page.sync="query.currentPage" :page-sizes="[5, 10, 15, 20]"
        @size-change="changePageSize" @current-change="changeCurrentPage">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("tags");
export default {
  data() {
    return {
      tableData: [],
      addDialogVisible: false,
      updateDialogVisible: false,
      query: {
        currentPage: 1,
        pageSize: 5,
      },
      total: 0,
      addnew: {
        newsBody: "",
        newsClickcount: 0,
        newsDate: "",
        newsHead: "",
        newsImg: "",
        newsType: "",
      },
      updatenew: {
        newsBody: "",
        newsClickcount: 0,
        newsDate: "",
        newsHead: "",
        newsImg: "",
        newsType: "",
      }
    };
  },
  methods: {
    ...mapMutations(["addTabs"]),
    async getnews() {
      const res = await this.$api.news.getallnews(this.query);
      console.log("nn", res);
      this.tableData = res.data.newList.list;
      this.total = res.data.newList.total;
      console.log(this.tableData);
    },
    changeCurrentPage(args) {
      this.query.currentPage = args;
      this.getnews();
    },
    changePageSize(args) {
      console.log(args);
      this.query.pageSize = args;
      this.getnews();
    },
    async deletenew(id) {
      console.log(id);
      const res = await this.$api.news.delnew(id);
      console.log(res);
      if (res.code) {
        this.$message.success(res.message);
        this.getnews();
      }
    },
    updateNew(info) {
      console.log(info);
      this.updatenew = info
      this.updateDialogVisible = true
    },
    async updateinfo() {
      console.log("修改后的", this.updatenew);
      const res = await this.$api.news.updatenews(this.updatenew);
      console.log("addnn", res);
      if (res.code) {
        this.updateDialogVisible = false
        this.$message.success(res.message);
        this.getnews();
      }
    },
    add() {
      this.addDialogVisible = true
    },
    async addNew() {
      const res = await this.$api.news.addnews(this.addnew);
      console.log("addnn", res);
      if (res.code) {
        this.addDialogVisible = false
        this.$message.success(res.message);
        this.getnews();
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleAvatarSuccess(val) {
      console.log("图片", val.message);
      this.addnew.newsImg = val.message;
      // this.updateadmin.userSrc = val.message;
    },
    beforeAvatarUpload(file) {
      const isJPGaPNG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGaPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      console.log("aaaaa", isLt2M);
      return isLt2M && isJPGaPNG;
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.addTabs(to)
    })
  },
  created() {
    this.getnews();
  },
};
</script>

<style scoped>
.div_white {
  background-color: white;
}

.addnew_btn {
  margin: 1.6042vw 0;
  float: right;
}
</style>